<template>
    <view class="page__bd">
        <view class="hb-bar solid-bottom bg-white">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>文字大小
            </view>
        </view>
        <view class="bg-white padding-lr">
            <view class="solids-bottom padding-xs flex align-center">
                <view class="padding">60</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-xsl padding">
                        <text class="hb-icon_roundsuccessfill text-green"></text>
                    </view>
                    <view class="padding">用于图标、数字等特大显示</view>
                </view>
            </view>
            <view class="solids-bottom padding-xs flex align-center">
                <view class="padding">40</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-sl padding">
                        <text class=" hb-icon_roundsuccessfill text-green"></text>
                    </view>
                    <view class="padding">用于图标、数字等较大显示</view>
                </view>
            </view>
            <view class="solids-bottom padding-xs flex align-center">
                <view class="padding">22</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-xxl padding">
                        <text class="text-price text-red">80.00</text>
                    </view>
                    <view class="padding">用于金额数字等信息</view>
                </view>
            </view>
            <view class="solids-bottom padding-xs flex align-center">
                <view class="padding">18</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-xl padding">
                        <text class="text-black text-bold">您的订单已提交成功！</text>
                    </view>
                    <view class="padding">页面大标题，用于结果页等单一信息页</view>
                </view>
            </view>
            <view class="solids-bottom padding-xs flex align-center">
                <view class="padding">16</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-lg padding">
                        <text class="text-black">很久以前，那是很久以前，非常久</text>
                    </view>
                    <view class="padding">页面小标题，首要层级显示内容</view>
                </view>
            </view>
            <view class="solids-bottom padding-xs flex align-center">
                <view class="padding">14</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-df padding">为众人抱薪者，不可使其冻毙于风雪 </view>
                    <view class="padding">页面默认字号，用于摘要或阅读文本</view>
                </view>
            </view>
            <view class="solids-bottom padding-xs flex align-center">
                <view class="padding">12</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-sm padding">
                        <text class="text-grey">跟魔鬼打交道，总要有点魔鬼的手段</text>
                    </view>
                    <view class="padding">页面辅助信息，次级内容等</view>
                </view>
            </view>
            <view class="padding-xs flex align-center">
                <view class="padding">10</view>
                <view class="flex-sub text-center">
                    <view class="solid-bottom text-xs padding">
                        <text class="text-gray">生命中曾经有过的所有灿烂，原来终究，都需要用寂寞来偿还。</text>
                    </view>
                    <view class="padding">说明文本，标签文字等关注度低的文字</view>
                </view>
            </view>
        </view>

        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>文本溢出
            </view>
        </view>
        <view class="bg-white padding-sm">
            <view class="bg-grey margin-xs padding-sm radius">.hb-ellipsis</view>
            <view class="hb-ellipsis">人为了达到正义的目的，尤其是当遭遇的对手比较没有底线的时候，不得不做出一两件看起来不太高尚的事情。</view>
            <view class="bg-grey margin-xs padding-sm radius">.hb-multi-ellipsis--l2</view>
            <view class="hb-multi-ellipsis--l2">无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</view>
            <view class="bg-grey margin-xs padding-sm radius">.hb-multi-ellipsis--l3</view>
            <view class="hb-multi-ellipsis--l3">生命从来不曾离开过孤独而独立存在。无论是我们出生、我们成长、我们相爱还是我们成功失败，直到最后的最后，孤独犹如影子一样存在于生命一隅。所有人都显得很寂寞，用自己的方式想尽办法排遣寂寞，事实上仍是延续自己的寂寞。寂寞是造化对群居者的诅咒，孤独才是寂寞的唯一出口。</view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue">文字对齐</text>
            </view>
        </view>
        <view class="bg-white bg-white padding">
            <view class="text-left padding-xs">我时常怀念过去</view>
            <view class="text-center padding-xs">无论走到哪里，都应该记得，过去都是假的</view>
            <view class="text-right padding-xs">回忆只是一条没有尽头的路</view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>特殊文字
            </view>
        </view>
        <view class="padding text-center">
            <view class="padding-lr bg-white">
                <view class="solid-bottom padding">
                    <text class="text-price">80.00</text>
                </view>
                <view class="padding">价格文本，利用伪元素添加"¥"符号</view>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style>
</style>
